<template>
  <div class="order-main">
    <div class="top">
      <el-card class="card1" shadow="naver">
        <div slot="header">
          <span>条件查询</span>
        </div>
        <div>
          <el-row>
            <el-col :span="4">
              <el-input size="small"
                        v-model="username"
                        placeholder="用户名模糊查询"></el-input>

            </el-col>
            <el-col :span="4" :offset="1" >
              <el-select v-model="statucheck"
              size="small"
                         placeholder="订单状态">
                <el-option v-for="item in statustype"
                           :key="item.id"
                           :label="item.type"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="4" :offset="1" >
              <el-select v-model="statusendcheck"
                         size="small"
                         placeholder="是否关闭">
                <el-option v-for="item in statusendtype"
                           :key="item.id"
                           :label="item.type"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="3">

              <el-button size="small" type="primary" @click="dosSearch">查询</el-button>
              <el-button size="small" type="default" @click="restSearch">重置</el-button>

            </el-col>
          </el-row>

        </div>
      </el-card>

    </div>
    <div class="body-c">
      <el-card class="box-card1" shadow="never">
        <el-table
          :data="orderlist"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="#"
            type="index"
            align="center"

            width="180">
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户账号"
            align="center"

            width="180">
          </el-table-column>
          <el-table-column
            prop="addTime"
            align="center"

            label="添加时间">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"

            label="数量/金额">
            <template slot-scope="scope">
            <div>数量:{{scope.row.count}}</div>
              <div>金额:{{scope.row.price}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="订单状态">
            <template slot-scope="scope">
              <div v-if="scope.row.orderStatus > 0">
                <img v-if="scope.row.payType == 'wxpay'" style="width: 30px;height: 30px;" src="@/assets/icon/wxzhifu.png" alt="">
                <img  v-else style="width: 30px;height: 30px;"  src="@/assets/icon/zhifubao.png" alt="">
              </div>

              {{scope.row.orderStatus | ordertype}}
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="订单状态">
            <template slot-scope="scope">
              <div>
                  <img  style="width: 50px;height: 50px;"  v-if="scope.row.statusend == 0" src="@/assets/icon/pendings.png" alt="">
                <img style="width: 50px;height: 50px;"  v-else src="@/assets/icon/nowclose.png" alt="">
                <div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="orderId"
            align="center"

            label="订单编号">

          </el-table-column>
          <el-table-column
            prop="address"
            label="操作">
            <template slot-scope="scope">
            <el-button size="small" type="primary" @click="goDetail(scope.row.orderId)">查看订单</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-card>
    </div>
  </div>
</template>

<script>
import productOrderApi from "@/api/product/productOrder";
export default {
  name: "orderMangindex",
  data () {
    return {
      statustype:[
        {
          id:1,
          type:'已付款'
        },
        {
          id:2,
          type:'已发货'
        },
        {
          id:3,
          type:'已收货'
        },
        {
          id:9,
          type:'申请退款'
        }
      ],
      statucheck:"",
      statusendtype:[
        {
          id:0,
          type:'未关闭'
        },
        {
          id:1,
          type:'已关闭'
        },
      ],
      statusendcheck:"",
      orderlist:[],
      username:""

    }

  },
  methods: {
  getOrderList(){
    productOrderApi.orderList({
      username:this.username,
      status:this.statucheck,
      statusend:this.statusendcheck
    })
    .then(res=>{
      console.log(res)
      this.orderlist = res.data.list
    })
  },
    //查询订单
    dosSearch(){
    this.getOrderList()

    },
    //重置查询条件
    restSearch(){
      this.username=""
        this.statucheck=""
      this.statusendcheck=""
    this.getOrderList()
    },
    //跳转订单详情页
    goDetail(val){
      console.log(val)
      this.$router.push({name: 'orderdetail',params:{id:val}})
    }
  },
  filters:{
    ordertype:function (val){
      if (val == 0){
        return '未付款'
      }else if (val == 1){
        return '已付款'
      }else if (val == 2){
        return '已发货'
      }else if (val == 3){
        return '已收货'
      }
    },

  },
  computed:{

  },
  created(){
  this.getOrderList()
  }
}
</script>

<style lang="scss" scoped>
.order-main {
  width: 100%;
  .top {
    .card1 {
      width: 96%;
      margin: 0 auto;
      margin-top: 30px;
    }
  }
  .body-c{
    width: 100%;
    .box-card1{
      width: 96%;
      margin: 0 auto;
      margin-top: 30px;
    }
  }
}
</style>
